<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
	<!-- jquery -->
	<script src="assets/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		<!-- 导航栏的JS-开始 -->
		var host = "http://localhost:8083"
		
		//获取二级分类菜单，循环遍历添加菜单
		function getItemCat(){
			$.ajax({
				type:"get",
				url: host + "/itemCat/getAll",
				success: function(result){
					if(result.status == 200){
						//console.log(result.data)
						var itemCatList = result.data
						//遍历一级分类菜单
						for(var i in itemCatList){
							var itemCatOne = itemCatList[i]
							var itemCatOneChildren = itemCatOne.children
							//遍历二级分类菜单
							if(i==0){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#dog").append(
										`
											<li><a class="a" onclick="dogItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==1){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#cat").append(
										`
											<li><a class="a" onclick="catItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==2){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#other").append(
										`
											<li><a class="a" onclick="otherItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
						}
					}					
				}
			})
		}
		//点击狗狗分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function dogItem(id){
			$.ajax(host+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击猫咪分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function catItem(id){
			$.ajax(host+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击其他分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function otherItem(id){
			$.ajax(host+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击搜索框触发
		function searchItem(){
			let keyword = $("#search").val()
			$.ajax({
				type: "get",
				url: host+"/item/search",
				data: {
					keyword:keyword
				},
				success: function(result){
					if(result.status==200){
						window.location.href = "shop.html"
					}
				}
			})
		}
		//退出登录
		function logout(){
			$.ajax({
				type: "post",
				url: host+"/auth/logout",
				success: function(result){
					if(result.status == 200){
						alert("退出登录成功")
						window.location.href = "index.html"
					}else{
						alert("您还没有登录")
					}
				}
			})	
		}
		/* 登录认证，如果没有登录，就不会跳转到account.html页面 */
		function accountAuth(){
			$.ajax({
				type: "get",
				url: host+"/auth/getAuth",
				success: function(result){
					if(result.status == 200){
						window.location.href = "account.html"
					}else{
						alert("您还没有登录")
					}
				}
			})
		}
		/* 登录认证，如果没有登录，就不会跳转到cart.html页面 */
		function cartAuth(){
			$.ajax({
				type: "get",
				url: host+"/auth/getAuth",
				success: function(result){
					if(result.status == 200){
						window.location.href = "cart.html"
					}else{
						alert("您还没有登录")
					}
				}
			})
		}
		<!-- 导航栏的JS-结束 -->
		
		var itemId = 0
		/* 文档就绪 */
		$(function(){
			//获取萌宠商城导航栏信息
			getItemCat()
			getItemDesc()
		})
		/* 获取商品详情 */
		function getItemDesc(){
			$.ajax({
				type:  "get",
				url: host+"/itemDesc/getById",
				success: function(result){
					console.log(result)
					if(result.status == 200){
						let item = result.data
						itemId = item.id
						showItem(item)
					}else(
						console.log("获取失败")
					)					
				}
			})
		}
		/* 展示商品详情 */
		function showItem(item){
			//设置商品名称
			$(".item-title").text(item.title)
			$(".breadcrumb-title").text("商品："+item.title)
			$(".product-title").text(item.title)
			//商品价格
			$("#item-price").text(item.price+".00元")
			let old_price = item.price+100
			$("#item-price-old").text(old_price+".00元")
			//商品编号
			$("#item-id").text("商品编号："+item.id)
			//商品余货
			$("#item-num").text(item.num+"件")
			//商品图片
			$("#item-img").html(
				`
					<img src="${item.images}" alt="Product">
				`
			)
			//获取商品数量
			let count = $(".cart-plus-minus-box").attr("value")
		}
		//获取用户名并认证
		function getUserName(){
			$.ajax({
				type: "get",
				url: host+"/auth/getUserName",
				success: function(result){
					if(result.status == 200){
						let userName = result.data
						console.log(userName)
					}else{
						alert("您还没有登录")
						window.location.href="login.html"
					}
				}
			})
		}
		//添加购物车
		function addCart(){
			$.ajax({
				type: "get",
				url: host+"/auth/getUserName",
				success: function(result){
					if(result.status == 200){
						let userName = result.data
						updateCart(userName,itemId)
					}else{
						alert("您还没有登录")
						window.location.href="login.html"
					}
				}
			})
		}
		//获取到用户名和商品id后更新购物车
		function updateCart(userName,itemId){
			$.ajax({
				type: "post",
				url: host+"/cart/addCart",
				data: {
					userName: userName,
					itemId: itemId
				},
				success: function(result){
					if(result.status == 200){
						if(confirm("添加购物车成功，是否要移步到购物车页面")){
							window.location.href = "cart.html"
						}
					}else{
						alert("购物车已存在该商品，不可重复添加")
					}
				}
			})
		}
		function buyItem(){
			$.ajax({
				type: "get",
				url: host+"/auth/getUserName",
				success: function(result){
					if(result.status == 200){
						let userName = result.data
						goCheckOut(userName,itemId)
					}else{
						alert("您还没有登录")
						window.location.href="login.html"
					}
				}
			})
		}
		function goCheckOut(userName,itemId){
			$.ajax({
				type: "post",
				url: host+"/buy/setBuy",
				data: {
					userName: userName,
					itemId: itemId
				}
			})
			window.location.href = "checkout.html"
		}
	</script>

</head>

<body>
    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Top Start -->
        <div class="header-top bg-name-primary">
            <div class="container">
                <div class="row align-items-center">

					<!-- Header Top Message Start -->
					<div class="col-12 col-lg-6">
					    <div class="header-top-msg-wrapper">
					        <a href="index.html" class="header-top-message">欢迎来到萌宠奇遇!</a>
					    </div>
					</div>
					<div class="col-12 col-lg-6">
					    <div class="header-top-settings">
							<a onclick="logout()" style="font-size: small; float: right; color: white;"> 退出登录 </a>
					        <a href="register.html" style="font-size: small; float: right; color: white;"> 注册&nbsp;&nbsp;|&nbsp;&nbsp; </a>
					        <a href="login.html" style="font-size: small; float: right; color: white;"> 登录&nbsp;&nbsp;|&nbsp;&nbsp;</a>
					    </div>
					</div>
					<!-- Header Top Message End -->

                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- Header Logo Start -->
                        <div class="col-lg-3 col-md-4 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="main-menu">
                                <ul>
                                    <li class="has-children">
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li class="has-children position-static">
                                         <a href="#">萌宠商城</a>
                                        <ul class="mega-menu" id="itemCat">
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">狗狗</h4>
                                                <ul class="m-b-n10" id="dog">
                                                    
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">猫咪</h4>
                                                <ul class="m-b-n10" id="cat">
                                                   
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">其他</h4>
                                                <ul class="m-b-n10" id="other">
                                                   
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <div class="megamenu-image">
                                                    <a href="shop.html">
                                                        <img class="fit-image" src="assets/images/header/mega-menu.png" alt="Megamenu Image">
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="#">萌宠论坛</a>
                                        <ul class="sub-menu">
                                            <li><a href="forum.html">浏览论坛</a></li>
                                            <li><a href="forum-details.html">话题详情</a></li>
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="#">萌宠日记</a>
                                        <ul class="sub-menu">
                                            <li><a href="diary.html">我的日记</a></li>
                                            <li><a href="diary-details.html">日记详情</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="login.html">登录</a></li>
                                    <li><a href="register.html">注册</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-lg-3 col-md-8 col-6">
                            <div class="header-actions">

                                <!-- Header Action Search Button Start -->
                                <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                    <div class="action-execute">
                                        <a class="action-search-open" href="javascript:void(0)"><i class="icon-magnifier icons"></i></a>
                                        <a class="action-search-close" href="javascript:void(0)"><i class="ti-close"></i></a>
                                    </div>
                                    <!-- Search Form and Button Start -->
                                    <form class="header-search-form" >
                                        <input type="text" class="header-search-input" placeholder="搜索商品" value="" id="search">
                                        <button class="header-search-button" onclick="searchItem()"><i class="icon-magnifier icons"></i></button>
                                    </form>
                                    <!-- Search Form and Button End -->
                                </div>
                                <!-- Header Action Search Button End -->

                                <!-- Header My Account Button Start -->
                                <a onclick="accountAuth()" class="header-action-btn header-action-btn-wishlist"">
                                    <i class="icon-user icons"></i>
                                </a>
                                <!-- Header My Account Button End -->

                                <!-- Header Action Button Start -->
                                <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                    <a onclick="cartAuth()" class="cart-visible">
                                        <i class="icon-handbag icons"><span style="font-size: medium;">&nbsp;购物车</span></i>
                                    </a>
                                </div>
                                <!-- Header Action Button End -->
                            </div>
                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

    </div>
    <!-- Header Section End -->
    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">某某商品</h2>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li class="item-title">某某商品</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- Single Product Section Start -->
    <div class="section section-margin">
        <div class="container">
            <div class="row">

                <div class="col-lg-5 offset-lg-0 col-md-8 offset-md-2">

                    <!-- Product Details Image Start -->
                    <div class="product-details-img">

                        <!-- Single Product Image Start -->
                        <div class="single-product-img swiper-container product-gallery-top">
                            <div class="swiper-wrapper popup-gallery">
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/1.png" id="item-img">
                                    <img class="w-100" src="assets/images/products/large-product/1.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/2.png">
                                    <img class="w-100" src="assets/images/products/large-product/2.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/3.png">
                                    <img class="w-100" src="assets/images/products/large-product/3.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/4.png">
                                    <img class="w-100" src="assets/images/products/large-product/4.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/5.png">
                                    <img class="w-100" src="assets/images/products/large-product/5.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/6.png">
                                    <img class="w-100" src="assets/images/products/large-product/6.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/7.png">
                                    <img class="w-100" src="assets/images/products/large-product/7.png" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" href="assets/images/products/large-product/8.png">
                                    <img class="w-100" src="assets/images/products/large-product/8.png" alt="Product">
                                </a>
                            </div>
                        </div>
                        <!-- Single Product Image End -->

                        <!-- Single Product Thumb Start -->
                        <div class="single-product-thumb swiper-container product-gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/1.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/2.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/3.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/4.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/5.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/6.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/7.png" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img src="assets/images/products/medium-plus-product/8.png" alt="Product">
                                </div>
                            </div>

                            <!-- Next Previous Button Start -->
                            <div class="swiper-button-next swiper-nav-button"><i class="ti-arrow-right"></i></div>
                            <div class="swiper-button-prev swiper-nav-button"><i class="ti-arrow-left"></i></div>
                            <!-- Next Previous Button End -->

                        </div>
                        <!-- Single Product Thumb End -->

                    </div>
                    <!-- Product Details Image End -->

                </div>

                <div class="col-lg-7">

                    <!-- Product Summery Start -->
                    <div class="product-summery position-relative">

                        <!-- Product Head Start -->
                        <div class="product-head m-b-15">
                            <h2 class="product-title">某某商品名称</h2>
                        </div>
                        <!-- Product Head End -->

                        <!-- Price Box Start -->
                        <div class="price-box m-b-10">
                            <span class="regular-price" id="item-price">70.00元</span>
                            <span class="old-price" ><del id="item-price-old">85.00元</del></span>
                        </div>
                        <!-- Price Box End -->

                        <!-- SKU Start -->
                        <div class="商品 m-b-15">
                            <span id="item-id">商品编号: 12345</span>
                        </div>
                        <!-- SKU End -->

                        <!-- Product Inventory Start -->
                        <div class="product-inventroy m-b-15">
                            <span class="inventroy-title" > <strong>剩余库存:</strong></span>
                            <span class="inventory-varient" id="item-num">12件</span>
                        </div>
                        <!-- Product Inventory End -->
                        <!-- Description End -->

                        <!-- Product Coler Variation Start -->
                        <div class="product-color-variation m-b-25">
                            <span> <strong>包装颜色: </strong></span>
                            <button type="button" class="btn bg-name-danger"></button>
                            <button type="button" class="btn bg-name-primary"></button>
                            <button type="button" class="btn bg-name-dark"></button>
                            <button type="button" class="btn bg-name-light"></button>
                        </div>
                        <!-- Product Coler Variation End -->

                        <!-- Quantity Start -->
                        <div class="quantity d-flex align-items-center m-b-25">
                            <span class="m-r-10"><strong>数量: </strong></span>
                            <div class="cart-plus-minus">
                                <input class="cart-plus-minus-box" value="1" type="text">
                                <div class="dec qtybutton"></div>
                                <div class="inc qtybutton"></div>
                            </div>
                        </div>
                        <!-- Quantity End -->

                        <!-- Cart Button Start -->
                        <div class="cart-btn action-btn m-b-30">
                            <div class="action-cart-btn-wrapper d-flex">
                                <div class="add-to_cart">
                                    <a class="btn btn-primary btn-hover-dark rounded-0" onclick="addCart()">添加到购物车</a>
                                </div>
                                <a href="wishlist.html" title="Wishlist" class="action"><i class="ti-heart"></i></a>
                            </div>
                        </div>
                        <!-- Cart Button End -->

                        <!-- Single Product Buy Button Start -->
                        <div class="single-product-buy m-b-30">
                            <a class="btn btn-primary btn-hover-dark rounded-0" onclick="buyItem()">立刻购买</a>
                        </div>
                        <!-- Single Product Buy Button End -->

                        <!-- Social Shear Start -->
                        <div class="social-share m-b-n35">
                            <div class="widget-social justify-content-start m-b-30">
                                <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                            </div>
                        </div>
                        <!-- Social Shear End -->

                    </div>
                    <!-- Product Summery End -->

                </div>

            </div>
        </div>
    </div>
    <!-- Single Product Section End -->

    <!-- Single Product Tab Start -->
    <div class="section section-padding bg-name-bright">
        <div class="container">
            <div class="row">

                <!-- Single Product Tab Start -->
                <div class="col-lg-12 single-product-tab">
                    <ul class="nav nav-tabs m-b-n15" id="myTab" role="tablist">
                        <li class="nav-item m-b-15">
                            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#connect-1" role="tab" aria-selected="true">描述</a>
                        </li>
                        <li class="nav-item m-b-15">
                            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#connect-2" role="tab" aria-selected="false">评论</a>
                        </li>
                        <li class="nav-item m-b-15">
                            <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#connect-3" role="tab" aria-selected="false">运输政策</a>
                        </li>
                       
                    </ul>

                    <div class="tab-content mb-text" id="myTabContent">
                        <div class="tab-pane fade show active" id="connect-1" role="tabpanel" aria-labelledby="home-tab">
                            <div class="desc-content">
                                <p class="m-b-15">拉布拉多和金毛最大的区别在于毛，金毛的毛发属于比较长的，而拉布拉多的毛发是属于短毛，并且比较扎手，脸部特征表现为金毛的脸会短一点，而拉不拉多的脸会稍微长一点，金毛的耳朵也要比拉布拉多的耳朵短一些，位置也会有不同。</p>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="connect-2" role="tabpanel" aria-labelledby="profile-tab">
                            <!-- Start Single Content -->
                            <div class="product_tab_content m-t-40 p-3 border">

                                <!-- Start Single Review -->
                                <div class="single-review d-flex m-b-20">

                                    <!-- Review Thumb Start -->
                                    <div class="review_thumb">
                                        <img alt="review images" src="assets/images/review/1.jpg">
                                    </div>
                                    <!-- Review Thumb End -->

                                    <!-- Review Details Start -->
                                    <div class="review_details">
                                        <div class="review_info m-b-10">

                                            <!-- Rating Start -->
                                            <span class="rating justify-content-start m-b-15">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-o"></i>
                                                    <i class="fa fa-star-o"></i>
                                                </span>
                                            <!-- Rating End -->

                                            <!-- Review Title & Date Start -->
                                            <div class="review-title-date d-flex">
                                                <h5 class="title">张三 - </h5><span> January 19, 2021</span>
                                            </div>
                                            <!-- Review Title & Date End -->

                                        </div>
                                        <p>金毛和拉布拉多都属于中型犬，智商高，容易训练，外形也有相似之处。如今，这两种狗在中国逐渐普遍起来，深得大家的喜爱，可有很多人都不会区分这两种狗。其实，分辨它们还是有章可循的。
第一、金毛的毛发较长，而拉布拉多的较短。拉布拉多的被毛是光滑的双层被毛，金毛的被毛是平直或着呈波浪状的被毛。黄色金毛只有一种毛色，即为黄色，由深到浅均有；而拉布拉多有三种毛色，除了黄色还有黑色和巧克力色。
第二、金毛的脸型比拉布拉多的短。
第三、金毛的耳朵比拉布拉多的短，位置高于眼睛。拉布拉多的耳朵紧贴头部垂挂，比较向后。
第四、拉布拉多的尾巴根部很粗，没有边毛。
浅色金毛和黄色拉多的幼犬在鉴别上有些难度，但如果细心观察，仍然可以发现两者之间的差别。这个时候你可以摸一下他们的被毛，拉布拉多的毛质短而直，非常致密 手感上面也可以感觉到粗硬。金毛的幼犬，毛发虽然没有发育完全，但仍可以明显看出，相对于拉布拉多，它们的毛发还是长一些，并且略有卷曲，属于绒毛。</p>
                                    </div>
                                    <!-- Review Details End -->

                                </div>
                                <!-- End Single Review -->

                                <!-- Rating Wrap Start -->
                                <div class="rating_wrap">
                                    <h5 class="rating-title m-b-10">添加评论</h5>
                                    <p class="m-b-10">您的电子邮件地址不会被公开。必需的地方已做标记*</p>
                                    <h6 class="rating-sub-title m-b-10">你的评分</h6>

                                    <!-- Rating Start -->
                                    <span class="rating justify-content-start m-b-15">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                            <i class="fa fa-star-o"></i>
                                        </span>
                                    <!-- Rating End -->

                                </div>
                                <!-- Rating Wrap End -->

                                <!-- Comments ans Replay Start -->
                                <div class="comments-area comments-reply-area">
                                    <div class="row">
                                        <div class="col-lg-12 ">

                                            <!-- Comment form Start -->
                                            <form action="#" class="comment-form-area">
                                                <div class="row comment-input">

                                                    <!-- Input Name Start -->
                                                    <div class="col-md-6 comment-form-author m-b-15">
                                                        <label>名字</label>
                                                        <input type="text" required="required" name="Name">
                                                    </div>
                                                    <!-- Input Name End -->

                                                    <!-- Input Email Start -->
                                                    <div class="col-md-6 comment-form-emai m-b-15">
                                                        <label>电子邮件</label>
                                                        <input type="text" required="required" name="email">
                                                    </div>
                                                    <!-- Input Email End -->

                                                </div>
                                                <!-- Comment Texarea Start -->
                                                <div class="comment-form-comment m-b-15">
                                                    <label>评论</label>
                                                    <textarea class="comment-notes" required="required"></textarea>
                                                </div>
                                                <!-- Comment Texarea End -->

                                                <!-- Comment Submit Button Start -->
                                                <div class="comment-form-submit">
                                                    <button class="btn btn-primary btn-hover-dark border-0">提交</button>
                                                </div>
                                                <!-- Comment Submit Button End -->

                                            </form>
                                            <!-- Comment form End -->

                                        </div>
                                    </div>
                                </div>
                                <!-- Comments ans Replay End -->

                            </div>
                            <!-- End Single Content -->
                        </div>
                        <div class="tab-pane fade" id="connect-3" role="tabpanel" aria-labelledby="contact-tab">
                            <!-- Shipping Policy Start -->
                            <div class="shipping-policy m-t-40 m-b-n15">
                                <h4 class="title m-b-20">我们商品的运输政策</h4>
                                <p class="m-b-15">近期疫情，为进一步加强源头管控，最大限度减少人员流动。各大物流公司充分保障服务质量不下降，届时我们会定期带来各地运输信息，给广大客户和司机师傅们运输信息服务支持~！</p>
                                <ul class="policy-list m-b-15">
                                    <li>1-2 个工作日（通常在一天结束时）</li>
                                    <li>30天退款保证</li>
                                    <li>24/7实时支持</li>
                                    <li>快递包邮</li>
                                   
                                </ul>
                                <p class="m-b-15">严格落实应急运输车辆顺畅通行要求：对持有《新型冠状病毒感染的肺炎疫情防控应急物资及人员运输车辆通行证》的运输车辆无条件优先放行，坚决落实绿色通道政策，实现应急物资运输保障车辆顺畅通行，确保生命应急通道、生活运输通道和生产运输通道便捷畅通。对邮政、快递车辆，各高速公路、国省干线、农村公路不得非法禁止或限制通行，不得随意扣押邮件、快件、车辆及人员</p>
                               
                            </div>
                            <!-- Shipping Policy End -->
                        </div>
                    </div>

                </div>
                <!-- Single Product Tab End -->

            </div>
        </div>
    </div>
    <!-- Single Product Tab End -->

    <!-- Product Section Start -->
    <div class="section section-margin">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title text-center">
                        <h2 class="title">相关产品</h2>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col">

                    <div class="product-carousel arrow-outside-container">
                        <div class="swiper-container">

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">
                                    <!-- Product Start -->
                                    <div class="product-wrapper">
                                        <div class="product">
                                            <!-- Thumb Start  -->
                                            <div class="thumb">
                                                <a href="single-product.html" class="image">
                                                    <img class="fit-image" src="assets/images/products/medium-product/5.png" alt="Product" />
                                                </a>
                                                <span class="badges">
                                                        <span class="sale">-18%</span>
                                                </span>
                                                <div class="action-wrapper">
                                                    <a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view"><i class="ti-plus"></i></a>
                                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i class="ti-heart"></i></a>
                                                    <a href="cart.html" class="action cart" title="Cart"><i class="ti-shopping-cart"></i></a>
                                                </div>

                                                <div class="countdown-area">
                                                    <div class="countdown-wrapper" data-countdown="2021/12/28"></div>
                                                </div>
                                            </div>
                                            <!-- Thumb End  -->

                                            <!-- Content Start  -->
                                            <div class="content">
                                                <h5 class="title"><a href="single-product.html">宠物离家</a></h5>
                                                <span class="rating">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-half-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                    </span>
                                                <span class="price">
                                                        <span class="new">45.50元</span>
                                                <span class="old">50.00元</span>
                                                </span>
                                            </div>
                                            <!-- Content End  -->
                                        </div>
                                    </div>
                                    <!-- Product End -->
                                </div>

                                <div class="swiper-slide">
                                    <!-- Product Start -->
                                    <div class="product-wrapper">
                                        <div class="product">
                                            <!-- Thumb Start  -->
                                            <div class="thumb">
                                                <a href="single-product.html" class="image">
                                                    <img class="fit-image" src="assets/images/products/medium-product/8.png" alt="Product" />
                                                </a>
                                                <div class="action-wrapper">
                                                    <a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view"><i class="ti-plus"></i></a>
                                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i class="ti-heart"></i></a>
                                                    <a href="cart.html" class="action cart" title="Cart"><i class="ti-shopping-cart"></i></a>
                                                </div>
                                            </div>
                                            <!-- Thumb End  -->

                                            <!-- Content Start  -->
                                            <div class="content">
                                                <h5 class="title"><a href="single-product.html">狗的基本训练</a></h5>
                                                <span class="rating">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-half-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                    </span>
                                                <span class="price">
                                                        <span class="new">55.00元</span>
                                                </span>
                                            </div>
                                            <!-- Content End  -->
                                        </div>
                                    </div>
                                    <!-- Product End -->
                                </div>

                                <div class="swiper-slide">
                                    <!-- Product Start -->
                                    <div class="product-wrapper">
                                        <div class="product">
                                            <!-- Thumb Start  -->
                                            <div class="thumb">
                                                <a href="single-product.html" class="image">
                                                    <img class="fit-image" src="assets/images/products/medium-product/6.png" alt="Product" />
                                                </a>
                                                <span class="badges">
                                                        <span class="sale">-20%</span>
                                                </span>
                                                <div class="action-wrapper">
                                                    <a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view"><i class="ti-plus"></i></a>
                                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i class="ti-heart"></i></a>
                                                    <a href="cart.html" class="action cart" title="Cart"><i class="ti-shopping-cart"></i></a>
                                                </div>
                                            </div>
                                            <!-- Thumb End  -->

                                            <!-- Content Start  -->
                                            <div class="content">
                                                <h5 class="title"><a href="single-product.html">宠物离家</a></h5>
                                                <span class="rating">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-half-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                    </span>
                                                <span class="price">
                                                        <span class="new">58.50元</span>
                                                <span class="old">62.85元</span>
                                                </span>
                                            </div>
                                            <!-- Content End  -->
                                        </div>
                                    </div>
                                    <!-- Product End -->
                                </div>

                                <div class="swiper-slide">
                                    <!-- Product Start -->
                                    <div class="product-wrapper">
                                        <div class="product">
                                            <!-- Thumb Start  -->
                                            <div class="thumb">
                                                <a href="single-product.html" class="image">
                                                    <img class="fit-image" src="assets/images/products/medium-product/1.png" alt="Product" />
                                                </a>
                                                <span class="badges">
                                                        <span class="sale">-18%</span>
                                                </span>
                                                <div class="action-wrapper">
                                                    <a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view" title="Quickview"><i class="ti-plus"></i></a>
                                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i class="ti-heart"></i></a>
                                                    <a href="cart.html" class="action cart" title="Cart"><i class="ti-shopping-cart"></i></a>
                                                </div>
                                            </div>
                                            <!-- Thumb End  -->

                                            <!-- Content Start  -->
                                            <div class="content">
                                                <h5 class="title"><a href="single-product.html">宠物专辑</a></h5>
                                                <span class="rating">
                                                        <i class="fa fa-star-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                    </span>
                                                <span class="price">
                                                        <span class="new">80.50元</span>
                                                <span class="old">85.80元</span>
                                                </span>
                                            </div>
                                            <!-- Content End  -->
                                        </div>
                                    </div>
                                    <!-- Product End -->
                                </div>

                                <div class="swiper-slide">
                                    <!-- Product Start -->
                                    <div class="product-wrapper">
                                        <div class="product">
                                            <!-- Thumb Start  -->
                                            <div class="thumb">
                                                <a href="single-product.html" class="image">
                                                    <img class="fit-image" src="assets/images/products/medium-product/3.png" alt="Product" />
                                                </a>
                                                <span class="badges">
                                                        <span class="new">最新的</span>
                                                </span>
                                                <div class="action-wrapper">
                                                    <a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view"><i class="ti-plus"></i></a>
                                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i class="ti-heart"></i></a>
                                                    <a href="cart.html" class="action cart" title="Cart"><i class="ti-shopping-cart"></i></a>
                                                </div>
                                            </div>
                                            <!-- Thumb End  -->

                                            <!-- Content Start  -->
                                            <div class="content">
                                                <h5 class="title"><a href="single-product.html">您需要这个</a></h5>
                                                <span class="rating">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star-half-o"></i>
                                                        <i class="fa fa-star-o"></i>
                                                    </span>
                                                <span class="price">
                                                        <span class="new">90.00元</span>
                                                </span>
                                            </div>
                                            <!-- Content End  -->
                                        </div>
                                    </div>
                                    <!-- Product End -->
                                </div>

                            </div>

                            <div class="swiper-pagination d-block d-md-none"></div>
                            <div class="swiper-button-prev swiper-nav-button d-none d-md-flex"><i class="ti-angle-left"></i></div>
                            <div class="swiper-button-next swiper-nav-button d-none d-md-flex"><i class="ti-angle-right"></i></div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- Product Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-name-bright section-padding">
            <div class="container">
                <div class="row m-b-n40">
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1000">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">关于我们</h1>
                            <p class="desc-content">然后疼痛就会停止，疼痛就会受到折磨。</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start m-b-n10">
                                <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1200">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">有用的链接</h2>
                            <ul class="widget-list">
                              <li><a href="wishlist.html">帮助和联系我们</a></li>
                                <li><a href="contact.html">退货和退款</a></li>
                                <li><a href="contact.html">线上商店</a></li>
                                <li><a href="contact.html">条款与条件</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1400">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">帮助</h2>
                            <ul class="widget-list">
                              <li><a href="wishlist.html">愿望清单</a></li>
                                <li><a href="contact.html">定价计划</a></li>
                                <li><a href="contact.html">物流跟踪</a></li>
                                <li><a href="contact.html">退换商品</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1600">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">发送时事通讯</h2>
                            <div class="widget-body">
                              <p class="desc-content m-b-20">订阅我们的时事通讯，首次购买可享受10%的折扣。</p>
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap p-t-5">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit">发送</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->
    </footer>
    <!-- Footer Section End -->

    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <!--Main JS-->
    <script src="assets/js/main.js"></script>
</body>

</html>